<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">电子病例</div>
            <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
        </div>

        <ul class="time-list flex-box-container">
            <li v-for="(item, index) in list" :class="{active: activeIndex == index}" :key="index" @click="handleToggle(item.id, index)">{{item.gmtCreated}} /</li>
        </ul>

        <div class="flex-box-container">
            <ul class="case-info flex" v-if="showDetail">
                <li>
                    <span>姓名：</span>
                    <span v-if="name">{{name}}</span>
                    <span v-else>暂无数据</span>
                </li>
                <li>
                    <span>年龄：</span>
                    <span v-if="listItem.age">{{listItem.age}}</span>
                    <span v-else>暂无数据</span>
                </li>
                <li>
                    <span>性别：</span>
                    <span v-if="listItem != {}">
                        <span v-if="listItem.sex == 1">男</span>
                        <span v-else>女</span>
                    </span>
                    <span v-else>暂无数据</span>
                </li>
                <li class="flex-box-align">
                    <span>病情自述：</span>
                    <el-input v-if="listItem.description" type="textarea" autosize :disabled="true" style="width: 200px" v-model="listItem.description" placeholder="请输入"></el-input>
                    <span v-else>暂无数据</span>
                </li>
                <li class="flex-box-align">
                    <span>CT片：</span>
                    <span>
                        <img v-if="listItem != {} && listItem.ctPhoto" :src="listItem.ctPhoto.fileUrl" class="avatar">
                        <span v-else>暂无数据</span>
                    </span>
                </li>
                <li class="flex-box-align">
                    <span>检查结果：</span>
                    <span>
                        <img v-if="listItem != {} && listItem.checkResultPhoto" :src="listItem.checkResultPhoto.fileUrl" class="avatar">
                        <span v-else>暂无数据</span>
                    </span>
                </li>
                <li class="flex-box-align">
                    <span>检查处方：</span>
                    <span>
                        <img v-if="listItem != {} && listItem.recipePhoto" :src="listItem.recipePhoto.fileUrl" class="avatar">
                        <span v-else>暂无数据</span>
                    </span>
                </li>
            </ul>

            <ul class="case-info flex" v-else>
                <li>
                    <span>姓名：</span>
                    <span>{{name}}</span>
                </li>
                <li>
                    <span>年龄：</span>
                    <el-input type="text" style="width: 200px" v-model="listItem.age" placeholder="请输入"></el-input>
                </li>
                <li>
                    <span>性别：</span>
                    <el-radio v-model="sex" label="1">男</el-radio>
                    <el-radio v-model="sex" label="0">女</el-radio>
                </li>
                <li class="flex-box-align">
                    <span>病情自述：</span>
                    <el-input type="textarea" style="width: 200px" v-model="listItem.description" placeholder="请输入"></el-input>
                </li>
                <li class="flex-box-align">
                    <span>CT片：</span>
                    <el-upload
                            class="avatar-uploader"
                            :action="upLoadUrl"
                            :show-file-list="false"
                            :on-success="handleCtSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="listItem.ctPhoto.fileUrl" :src="listItem.ctPhoto.fileUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </li>
                <li class="flex-box-align">
                    <span>检查结果：</span>
                    <el-upload
                            class="avatar-uploader"
                            :action="upLoadUrl"
                            :show-file-list="false"
                            :on-success="handleCheckSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="listItem.checkResultPhoto.fileUrl" :src="listItem.checkResultPhoto.fileUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </li>
                <li class="flex-box-align">
                    <span>检查处方：</span>
                    <el-upload
                            class="avatar-uploader"
                            :action="upLoadUrl"
                            :show-file-list="false"
                            :on-success="handleRecipeSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="listItem.recipePhoto.fileUrl" :src="listItem.recipePhoto.fileUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </li>
            </ul>
            <div style="margin-top: 20px" v-if="list.length">
                <el-button type="primary" @click="handleClickSave" v-if="!showDetail">保存</el-button>
                <el-button type="primary" @click="showDetail = false" v-else>编辑</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";

    export default {
        data() {
            return {
                showDetail: true,
                activeIndex: 0,
                list: [],
                listItem: {},
                id: "",
                upLoadUrl: "",
                name: "",
                sex: "1",
            }
        },
        components: {

        },
        mounted() {
            let sessionId = common.getCookie('sessionId');
            this.upLoadUrl = CONSTANT.URL.COMMON.UPLOAD + '?sessionId='+sessionId;
            this.name = decodeURI(parseUrlParams("name"))

            let params = {
                patientId: parseUrlParams("id"),
            }
            common.requestAjax(CONSTANT.URL.PATIENT.CASELIST, JSON.stringify(params), {pageIndex: 1, pageSize: 10 }, (res) => {
                if (res.status == 200) {
                    this.list = res.data.bussData
                    if(this.list.length) {
                        this.listItem = this.list[0]
                        this.activeIndex = 0
                        this.id = this.listItem.id
                    }
                }
            }, null)
        },
        methods: {
            handleCtSuccess(res, file) {
                this.listItem.ctPhoto = res.data.bussData;
            },
            handleCheckSuccess(res, file) {
                this.listItem.checkResultPhoto = res.data.bussData
            },
            handleRecipeSuccess(res, file) {
                this.listItem.recipePhoto = res.data.bussData;
            },
            beforeAvatarUpload(file) {

            },
            handleClickSave() {
                const {listItem} = this;
                let params = {
                    sex: this.sex,
                    age: listItem.age,
                    description: listItem.description,
                    ctPhotoId: listItem.ctPhoto.fileId,
                    checkResultPhotoId: listItem.checkResultPhoto.fileId,
                    recipePhotoId: listItem.recipePhoto.fileId,
                    patientId: parseUrlParams("id"),
                    id: this.id
                }
                common.requestAjax(CONSTANT.URL.PATIENT.CASEEDIT, JSON.stringify(params), {}, (res) => {
                    if (res.status == 200) {
                        this.$message({
                            type: "success",
                            message: res.msg
                        })
                        this.showDetail = true
                    }
                }, null)
            },
            handleToggle(id, index) {
                this.id = id
                this.activeIndex = index
                this.listItem = this.list[index]
            }
        }
    }
</script>

<style lang="scss">
    .container {
        .time-list {
            padding: 10px 0;
            border-bottom: 1px solid #efefef;
            li {
                color: #02b5f9;
                cursor: pointer;
            }
            li.active {
                color: #000;
            }
        }
        .case-info {
            li {
                margin-top: 20px;
            }
            li>span:nth-child(1) {
                display: inline-block;
                width: 200px;
                text-align: right;
                padding-right: 30px;
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
            }
            .avatar {
                width: 150px;
                height: 150px;
                display: block;
            }
        }


    }
</style>
